<template>
  <div class="page-container alarm-view">
    <div class="box-title">告警总览</div>
    <el-card class="card1" shadow="none" style="margin-bottom: 15px">
      <el-row :gutter="80">
        <el-col :span="15">
          <div class="f-c" style="height: 290px">
            <div class="box-sub-title">
              存量告警统计
            </div>
            <div class="f-g">
              <v-chart autoresize :option="option1" style="width: 100%;height: 100%" />
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="f-c" style="height: 290px">
            <div class="box-sub-title">
              当日告警
            </div>
            <div class="f-g f-c j-b" style="margin-top: 10px">
              <div
                v-for="(item,index) in alarmList"
                :key="index"
                class="alarm-view-item f-r a-c"
                :style="{borderColor: item.color}"
              >
                <el-image :src="item.img" style="width:24px;height: 24px;">
                  <div slot="error">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <span class="alarm-view-item--name">{{ item.name }}</span>
                <span class="alarm-view-item--value">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-form>
      <el-form-item style="text-align: right">
        <el-button type="primary">导出</el-button>
      </el-form-item>
    </el-form>
    <el-card class="card1" shadow="none">
      <div class="table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column label="告警名称">
            <template slot-scope="scope">
              <el-image style="width: 24px;height: 24px">
                <div slot="error">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              节点CPU使用率超阙值
            </template>
          </el-table-column>
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />

        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import crud from '@/mixins/crud'
const alarmList = [
  {
    color: '#F07269',
    name: '紧急',
    value: 0,
    color1: '#FFC1BF',
    color2: '#FF7474'
  },
  {
    color: '#FFB117',
    name: '重要',
    value: 0,
    color1: '#FFDB85',
    color2: '#FFAB2E'
  },
  {
    color: '#33E2C9',
    name: '次要',
    value: 0,
    color1: '#29DCC9',
    color2: '#45EFC8'
  },
  {
    color: '#81B6E8',
    name: '提示',
    value: 0,
    color1: '#427DF6',
    color2: '#70A8F6'
  }
]
export default {
  name: 'Index',
  mixins: [crud],
  data() {
    return {
      alarmList: alarmList,
      option1: {
        grid: {
          left: '0',
          right: '0',
          top: 70,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2022-10-09', '2022-10-09', '2022-10-09', '2022-10-09', '2022-10-09'],
          textStyle: {
            color: '#999999'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
            }
          }
        },
        yAxis: {
          type: 'value',
          textStyle: {
            color: '#999999'
          }

        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: alarmList.map(el => {
          return {
            name: el.name,
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: el.color2
              },
              {
                offset: 1,
                color: el.color1
              }
              ])
            }
          }
        })
      },
      columns: [
        { prop: '告警级别', label: '告警级别', width: '', minWidth: '' },
        { prop: '告警源', label: '告警源', width: '', minWidth: '' },
        { prop: '集群名称', label: '集群名称', width: '', minWidth: '' },
        { prop: '定位信息', label: '定位信息', width: '', minWidth: '' },
        { prop: '详细信息', label: '详细信息', width: '', minWidth: '' },
        { prop: '产生时间', label: '产生时间', width: '', minWidth: '' },
        { prop: '状态', label: '状态', width: '', minWidth: '' }
      ],
      tableData: [
        {
          告警级别: '重要'
        },
        {
          告警级别: '重要'
        },
        {
          告警级别: '重要'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.alarm-view {
  .box-title {
    height: 20px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-bottom: 15px;
  }
  .box-sub-title {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 14px;
  }
  .alarm-view-item {
    width: 100%;
    height: 46px;
    border: 1px solid #F07269;
    border-radius: 3px;
    padding-left: 40px;
    border: 2px solid;
    &--name,
    &--value{
      padding-left: 50px;
      height: 16px;
      line-height: 16px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 500;
      color: #7D7D7D;
    }
  }
}
</style>
